<script setup>
import {useI18n} from 'vue-i18n';
import {HOME_SECTION_INFO} from '@public/config.js'

const { t } = useI18n();

const jobs = computed(() => t('jobs').split('-'));
let dom = null;
let jobIndex = 0;
let typingState = true;

const typing = () => {
    const _typing = (text) => {
        requestAnimationFrame(() => {
            if (text.length === 0 && typingState) {
                typingState = false;
                return setTimeout(() => _typing(text), 1500);
            } else if (!typingState && dom.textContent.length === 0) {
                typingState = true;
                return setTimeout(() => typing(), 1500);
            } else if (!typingState && dom.textContent.length > 0) {
                dom.innerHTML = dom.textContent.slice(0, -1);
                return setTimeout(() => _typing(text), 50);
            } else if (typingState && 0 < text.length) {
                dom.innerHTML += text.charAt(0);
                text = text.slice(1);
                return setTimeout(() => _typing(text), 150);
            }
        })
    }
    const job = jobs.value[jobIndex];
    _typing(job);
    jobIndex = (jobIndex + 1) % jobs.value.length;
}

onMounted(() => {
    if (!import.meta.env.SSR) {
        dom = document.querySelector('.duty');
        typing()
    }
});
</script>

<template>
    <div id="home" class="home-section section-container">
        <div class="photo">
            <img src="../assets/images/photo.png" alt="">
        </div>
        <div class="profile">
            <span>{{ t('hello') }}</span>
            <h1 class="name">{{ t('name') }}</h1>
            <span>{{ t('im') }}</span>
            <h1 class="duty"></h1>
            <h2 class="description">
                <span v-for="(item, index) in t('desc').split(' ')" :key="item+index" class="description-item" :style="{'--index': index}" v-text="item"/>
            </h2>
            <div class="contact">
                <div class="contact-item" v-for="(item, index) in HOME_SECTION_INFO.contactList" :key="index" :style="{ '--index': index }">
                    <a class="iconfont" :class="item.icon" :href="item.url" target="_blank">
                        <span>{{ t(item.title) }}</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
#home {
    height: 100vh;
    color: var(--md-sys-color-on-surface-variant);

    .photo {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 80px auto;
        width: 150px;
        height: 150px;
        flex-shrink: 0;

        img {
            margin: 0 auto;
            object-fit: cover;
            padding: 10px;
            filter: drop-shadow(0 0 5px var(--md-sys-color-on-surface-variant));
            border-radius: 50%;
            animation: photo-in 1s ease forwards, photo-flashing 1s infinite alternate;
        }
    }

    .profile {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        text-align: center;
        max-width: 768px;
        width: 90%;
        font-family: __Source_Code_Pro_ef7c93, __Source_Code_Pro_Fallback_ef7c93;
        font-weight: 400;
        font-style: normal;

        h1 {
            margin: 0;
            font-size: 3rem;
            line-height: 1;
        }

        .duty {
            height: 5rem;

            &::after {
                content: '|';
                margin-left: 2px;
                color: var(--md-sys-color-on-surface-variant);
                animation: flashing 1s infinite;
            }
        }

        .name, .duty {
            margin-bottom: 20px;
            -webkit-text-stroke: 1px var(--md-sys-color-on-surface-variant);
            color: transparent;
            animation: normal-in .5s ease forwards;
        }

        .description {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            flex-wrap: wrap;

            &-item {
                opacity: 0;
                animation: upward-in .1s ease forwards;
                animation-delay: calc(var(--index) * .1s);
            }
        }

        .contact {
            margin-top: 40px;
            display: flex;
            gap: 20px;
            align-items: center;
            justify-content: center;

            &-item {
                border: 1px solid var(--md-sys-color-on-surface-variant);
                border-radius: 50px;
                padding: 6px 10px;
                cursor: pointer;
                opacity: 0;
                line-height: 1;
                transform: translateY(20px);
                animation: downward-in .3s ease forwards;
                animation-delay: calc(var(--index) * .1s);

                &:hover {
                    span {
                        margin-left: 5px;
                        max-width: 500px;
                        max-height: 2em;
                    }
                }

                a {
                    color: inherit;
                    text-decoration: none;
                }

                span {
                    max-width: 0;
                    max-height: 0;
                    overflow: hidden;
                    display: inline-flex;
                    word-break: keep-all;
                }
            }
        }
    }
}
</style>
